﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link href="packages/normalize.css.2.1.2/content/Content/normalize.css" rel="stylesheet" />
        <link href="styles/style.css" rel="stylesheet" />
        <script src="scripts/classical-class-create-inherit.js"></script>
        <script src="scripts/jQuery-2.0.2.js"></script>
        <script src="scripts/jquery-ui-1.10.3.custom.min.js"></script>
    </head>
    <body>
        <div id="wrapper">

        </div>
        <script src="scripts/ui/gamePage.js"></script>
        <script src="scripts/utils.js"></script>
        <script src="scripts/GemColor.js"></script>
        <script src="scripts/Gem.js"></script>

        <script>
            var dragged = null;
            var dropped = null;
            console.log(dragged);
            console.log(dropped);
            var onGemClick = function(e) {

                if (dragged === null) {
                    dragged = e.target;
                } else {
                    dropped = e.target;
                }

                if (dragged !== null && dropped !== null) {
                    var fClass = $(dragged).attr('id');
                    var sClass = $(dropped).attr('id');

                    var colOne = fClass[3];
                    var colTwo = sClass[3];

                    var rowOne = fClass[1];
                    var rowTwo = sClass[1];

                    var resultCol = colOne - colTwo;
                    var resultRow = rowOne - rowTwo;

                    if (Math.abs(resultCol) === 1 || Math.abs(resultRow) === 1) {
                        var fGem = $('#' + fClass);
                        var sGem = $('#' + sClass);
                        fGem.animate({
                            top: sGem.css('top'),
                            left: sGem.css('left')
                        }, 500);

                        sGem.animate({
                            top: fGem.css('top'),
                            left: fGem.css('left')
                        }, 500);


                        $(dragged).attr('id', sClass);
                        $(dropped).attr('id', fClass);
                    }

                    dragged = null;
                    dropped = null;
                }
            };

   var gems = utils.createAllGems('#gameField');
 
            var wrapper = document.querySelector("#wrapper #gameField");

            wrapper.addEventListener("click", onGemClick);


        </script>

    </body>
</html>
